<template>
  <div class="register">
    <nav-bar>
      <i slot="left" class="iconfont icon-fanhui"></i>
      <div slot="center">注册</div>
    </nav-bar>
    <div class="panel">
      <van-form @submit="onSubmit" validate-first scroll-to-error>
        <van-field
          label="头像"
          label-align="center"
          :rules="[{ validator: validatorFile, message: '文件不能为空' }]"
        >
          <template #input>
            <van-uploader v-model.lazy="user.avatar" max-count="1" />
          </template>
        </van-field>
        <van-field
          v-model.lazy="user.nickName"
          type="text"
          label="昵称"
          label-align="center"
          :rules="[nickNamePattern]"
        />
        <van-field
          v-model.lazy="user.phone"
          type="tel"
          label="手机号"
          label-align="center"
          :rules="[phonePattern]"
        />
        <van-field
          v-model.lazy="code"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码"
          label-align="center"
          :rules="[{ validator: validatorCode, message: '验证码输入错误' }]"
        >
          <template #button>
            <van-button
              size="mini"
              :disabled="isDisabled"
              color="#00bfc0"
              native-type="button"
              @click="sendCode"
              class="btn"
            >
              {{ message }}
            </van-button>
          </template>
        </van-field>
        <van-field
          v-model.lazy="user.password"
          type="password"
          label="密码"
          label-align="center"
          :rules="[passwordPattern]"
        />
        <van-field
          v-model.lazy="user.email"
          type="text"
          label="邮箱"
          label-align="center"
          :rules="[emailPattern]"
        />
        <van-field label="性别" label-align="center">
          <template #input>
            <van-radio-group v-model="user.gander" direction="horizontal">
              <van-radio name="1" checked-color="#00bfc0">男</van-radio>
              <van-radio name="2" checked-color="#00bfc0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div style="padding: 20px">
          <van-button block color="#00bfc0" size="small" hairline
            >注 册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { register, sendCode } from '../../api'
import {
  phonePattern,
  passwordPattern,
  nickNamePattern,
  emailPattern,
  toast
} from '../../utils'
import NavBar from '../../components/nav-bar/nav-bar.vue'

export default {
  components: { NavBar },
  data() {
    return {
      user: {
        phone: '',
        password: '',
        gander: '1',
        nickName: '',
        email: '',
        avatar: []
      },
      code: '',
      validationCode: '',
      phonePattern,
      passwordPattern,
      nickNamePattern,
      emailPattern,
      message: '获取验证码',
      isDisabled: false
    }
  },
  methods: {
    // 注册
    async onSubmit() {
      // 创建表单数据对象
      const formData = new FormData()
      // 设置表单数据
      for (const key in this.user) {
        if (key === 'avatar') {
          formData.set(key, this.user[key][0].file)
        } else {
          formData.set(key, this.user[key])
        }
      }
      const result = await register(formData)
      if (result) {
        toast.success(result.data)
        this.$router.replace('/login')
      }
    },
    // 发送验证码
    async sendCode() {
      const { phone } = this.user
      if (!this.phonePattern.pattern.test(phone)) {
        toast.fail(this.phonePattern.message)
        return
      }
      const result = await sendCode({ phone })
      if (!result) return
      this.validationCode = result.data
      toast.success('验证码发送成功\n请留意手机')
      let a = 60
      const timer = setInterval(() => {
        this.message = --a + 's'
        this.isDisabled = true
        if (a <= 0) {
          clearInterval(timer)
          this.message = '获取验证码'
          this.isDisabled = false
        }
      }, 1000)
    },
    // 校验文件
    validatorFile(value) {
      return value.length > 0
    },
    // 校验验证码
    validatorCode(value) {
      return this.validationCode == value
    }
  }
}
</script>

<style scoped lang="less">
.register {
  height: 100vh;
  position: relative;
  z-index: 1;
  background: white;
  overflow: hidden;
  .panel {
    height: calc(100vh - 44px);
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      width: 70px;
    }
  }
}
</style>
